<template>
    <div>
        <router-view></router-view>
        <TestDialog ref="dialog" />
        <CommentDialog ref="comment"/>
        <div class="video-container">
            <video-player  class="vjs-custom-skin"
                ref="videoPlayer"
                @timeupdate="timeupdate"
                customEventName="timeupdate"
                :playsinline="false"
                :options="playerOptions"
            />
        </div>
        <div class="video-operator">
            <div class="w-5">
                <van-icon class="video-icon" name="edit" />
                <span class="comment" @click="comment()">评论</span>
            </div>
            <div class="w-5" :class="{active:isLike}">
                <div>
                    <van-icon class="video-icon" :name="isLike?'like':'like-o'"></van-icon>
                    <span class="zan" @click="zan()">赞{{likeNum}}</span>
                </div>
            </div>
        </div>
        <van-tabs class="tabs" sticky v-model="active">
            <van-tab title="学习资料">
                <div style="padding:15px 20px;line-height:30px;">
                    为了加强员工技能，老师居高临下、口若悬河、循循善诱、引人入胜、如坐春风、受益匪浅、恍然大悟、豁然开朗。 　　评价老师讲的课好的理由：1）整堂课思路清晰，环节紧凑，重难点突出，设计合理。学生的课堂习惯非常好，每个人都能积极的参与到课堂中，课堂效果较好。
                </div>
            </van-tab>
            <van-tab title="学习记录" style="padding-bottom:40px;">
                <van-list
                    v-model="loading"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
                    @load="onLoad"
                    >
                    <van-cell
                        v-for="item in list"
                        :value="item.time"
                        :key="item.id"
                        is-link
                        :title="item.name"
                    />
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>

import TestDialog from '../components/TestDialog'
import CommentDialog from '../components/CommentDialog'
import request from '../request'
export default {
    name:'video-play',
    components:{
        TestDialog,
        CommentDialog
    },
    data(){
        return {
            playerOptions:{
                // muted: true,
                language: 'en',
                // playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [
                    {
                        type: "video/mp4",
                        src: "http://pmyiyxjyv.bkt.clouddn.com/content.mp4"
                    }
                ],
            },
            questionTime:{},
            curTime:'',
            active:0,
            isLike:false,
            likeNum:12,
            list:[],
            loading:false,
            error:false
        }
    },
    computed:{
        player(){
            return this.$refs.videoPlayer
        },
        dialog(){
            return this.$refs.dialog
        }
    },
    mounted(){
        let search = location.search.substring(1);
        let questionTime = ''
        search.split("&").forEach(item => {
            let [key,value] = item.split("=")
            if(key === 'questionTime'){
                questionTime = value.split(',')
            }
        })
        if(questionTime){
            questionTime.forEach(t => {
                this.questionTime[t] = false
            })
        }
    },
    methods:{
        async getDetail(){

        },
        onLoad(){
            let len = this.list.length
            this.loading = false;
            if(len > 30) return
            for (let i = 0; i < 10; i++) {
                this.list.push({
                    id:len + i,
                    name:'移动端项目部署'+i+len,
                    time:`2018-${i%12 + 1}-${i+1}`
                })            
            }
        },
        timeupdate(data){
            let time = data.timeupdate;
            if(time){
                time = Math.floor(time)
                if(typeof this.questionTime[time] === 'boolean' && !this.questionTime[time]){
                    this.player.player.pause()
                    this.player.player.exitFullscreen()
                    this.curTime = time;
                    let video = this.player.$el.querySelector('video')
                    if(video){
                        video.style = 'top:-1000px;position:absoulte;';
                    }
                    this.dialog.show(() => {
                        this.questionTime[this.curTime] = true
                        this.player.player.play()
                        if(video){
                            video.style = '';
                        }
                    })
                }
            }
        },
        exitFullscreen() {
            var de = document;
            if (de.exitFullscreen) {
                de.exitFullscreen();
            } else if (de.mozCancelFullScreen) {
                de.mozCancelFullScreen();
            } else if (de.webkitCancelFullScreen) {
                de.webkitCancelFullScreen();
            }
        },
        comment(){
            this.$refs.comment.show()
        },
        zan(){
            this.isLike = !this.isLike
            if(this.isLike){
                this.likeNum++
            }else{
                this.likeNum--
            }
        }
    }
}
</script>
<style lang="less">
    html,body{
        padding: 0;
        margin: 0;
    }
    .video-container{
        height: 260px;
        overflow: hidden;
        .vjs-custom-skin > .video-js{
            height: 260px;
            position: fixed;
            z-index: 100;
            width: 100%;
        }
        .video-js button{
            outline: none;
        }
        .video-js .vjs-big-play-button{
            width: 80px !important;
            height: 40px !important;
            line-height: 40px !important;
            margin-top: -20px !important;
            margin-left: -40px !important;
        }
    }
    .tabs{
        // padding-top: 300px;
        // position: fixed;
        // top: 260px;
    }
    .video-operator{
        border-top: 1px solid #dcdcdc;
        height: 40px;
        text-align: center;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 10;
        background: white;
        .w-5{
            float: left;
            width: 50%;
            height: 100%;
            line-height: 40px;
            box-sizing: border-box;
            // border: 1px solid red;
            &.active{
                color: red;
            }
            .video-icon{
                height: 30px;
                font-size: 24px;
                vertical-align: middle;
            }
        }
    }
    
</style>    